<template>
  <div class="bottom">
    <div class="bottom-main-header">
      <ul class="bmh-header">
        <li>
          商品
        </li>
        <li>
          价格
        </li>
        <li>
          当前库存
        </li>
        <li>
          操作
        </li>
      </ul>
      <ul class="bmh-content">
        <li v-for="(item,index) in data.list" :key="item.id">
          <div class="bmh-content-img">
            <div>
              <img :src="item.mainimage" width="74" height="80" alt="">
            </div>
            <div>
              {{item.title}}
            </div>
          </div>
          <div>
            <p>￥{{item.price}}</p>
          </div>
          <div>
            <p>{{item.stock===0?'无':'有'}}</p>
          </div>
          <div>
            <el-button @click="handleRemove(item.collid)">删除</el-button>
            <el-button type="primary" @click="buyNew(item.proid)">查看商品</el-button>
          </div>
        </li>
      </ul>
    </div>
    <!--为空时显示-->
    <div v-show="data.list.length===0" class="bottom-main-content">
      <div>
        <img src="/images/personalCenter/noOrder.png">
        <p>暂无到货通知</p>
      </div>
    </div>
    <!--删除弹窗-->
    <div class="mask" v-show="data.flag">
      <div class="mask-content">
        <div class="mask-content-body">
          <div class="rem">
            <h3>确定要取消该订单吗</h3>
            <div>
              <el-button @click="enThink">再想想</el-button>
              <el-button @click="enRemove">确定</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
//引入vue
import { reactive,onMounted,getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
//引入vuex
import { useRouter } from 'vue-router';
//proxy
const {proxy} = getCurrentInstance();
//router
const router = useRouter();
//data数据
let data = reactive({
  //模态框是否隐藏
  flag:'',
  //收藏遍历的数据
  list:[],
  //收藏id
  collid:''
});
//挂载后请求数据
onMounted(()=>{
  proxy.$get('/api/PersonalCenter/collection',{})
      .then((date)=>{
        data.list=date.collection;
        console.log(date.collection);
      })
})
//立即购买
let buyNew = (collid)=>{
  router.push(`/product?id=${collid}`)
}
//删除
let handleRemove = (collid)=>{
  data.flag = true;
  data.collid = collid;
}
//再想想
let enThink = ()=>{
  data.flag = false;
}
//确定删除
let enRemove = () =>{
  //发送请求删除
  proxy.$get('/api/PersonalCenter/collection',{collid:data.collid,code:'remove'})
      .then((date)=>{
        //删除成功提示
        ElMessage({
          message: date.remove,
          type: 'success',
        });
        //模态框消失
        data.flag = false;
        //重新赋值
        data.list = date.collection;
      })
}
</script>

<style lang="less" scoped>
.bottom {
  box-sizing: border-box;
  box-shadow: 0 0 10px 0 #eaeaea;
  padding: 35px 50px;
  //min-height: 100%;
  .bottom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 20px;
      font-weight: 400;
    }
    a {
      color: #666;
      font-size: 14px;
    }
  }
  //收藏导航
  .bottom-main-header {
    .bmh-header {
      display: flex;
      height: 57px;
      background: #f6f6f6;
      align-items: center;
      justify-content: space-around;
      li {
        height: 100%;
        cursor: pointer;
        line-height: 57px;
        font-size: 18px;
      }
      li:nth-child(1){
        width: 300px;
        text-align: left;
        padding-left: 26px;
      }
      li:nth-child(2){
        //width: 160px;
        text-align: center;
        flex: 1.1;
      }
      li:nth-child(3){
        //width: 160px;
        text-align: center;
        flex: 2.75;
      }
      li:last-child {
        //width: 224.36px;
        text-align: right;
        padding-right: 26px;
        flex: 3;
      }
      .bottom-border {
        color: #000;
        border-bottom: 2px solid #000;
      }
    }
    .bmh-content {
      li {
        color: #000;
        padding: 45px 0;
        display: flex;
        align-items: center;
        >div:nth-child(1){
          color: #333;
          width: 300px;
          text-align: left;
          padding-left: 26px;
        }
        >div:nth-child(2){
          width: 160px;
          text-align: center;
          flex: 1;
        }
        >div:nth-child(3){
          width: 160px;
          text-align: center;
          flex: 2.5;
        }
        >div:last-child {
          width: 224.36px;
          text-align: right;
          flex: 3;
          .el-button {
            width: 90px;
            height: 32px;
          }
        }
        .bmh-content-img {
          display: flex;
          align-items: center;
          div:last-child {
            width: 160px;
            margin-left: 29px;
          }
        }
      }
      li:not(:first-child){
        border-top: 1px solid #e0e0e0;
      }
    }
  }
  //收藏内容
  .bottom-main-content {
    text-align: center;
    margin-top: 36px;
    padding-bottom: 58px;
    padding-right: 55px;
    padding-left: 55px;
    div {
      margin-top: 150px;
      padding-bottom: 58px;
      img {
        width: 138px;
        height: 138px;
        margin: 0 auto;
      }
      p {
        text-align: center;
      }
    }
  }
}
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0,0,0,.6);
  z-index: 999;
  //display: none;
  .mask-flag {
    //min-width: 440px!important;
  }
  .mask-content {
    max-width: 680px;
    min-width: 380px;
    padding: 40px 65px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff;
    border-radius: 2px;
    transform: translate(-50%,-50%);
    text-align: center;
    .mask-content-body {
      width: 100%;
      background: #fff;
      border-radius: 2px;
      text-align: center;
      font-size: 14px;
      .rem {
        box-sizing: border-box;
        //min-width: 440px;
        h3 {
          line-height: 24px;
          font-size: 18px;
          color: #303133;
        }
        div {
          display: flex;
          justify-content: space-between;
          .el-button {
            width: 164px;
            height: 40px;
          }
        }
      }
      div {
        position: relative;
        margin: 10px 0;
        .el-input {
          height: 50px;
        }
        h3 {
          padding: 0;
          margin-bottom: 40px;
          font-size: 22px;
        }
        .personalData-form-inp {
          .el-input {
            height: 50px;
          }
          input {
            width: 100%;
            height: 50px;
            padding: 0 25px;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
          }
          .el-select {
            width: 165px;
            /deep/ .el-input__inner {
              height: 50px;
            }
          }
        }
        .el-form-item-inp {
          display: flex;
          justify-content: space-between;
        }
      }
      .hint {
        position: absolute;
        bottom: -20px;
        span {
          text-align: left;
          color: red;
          font-size: 12px;
        }
      }
      .confirm {
        display: flex;
        justify-content: start;
        /deep/ .el-button {
          width: 100%;
          height: 50px;
        }
      }
      .close {
        /deep/ .el-icon {
          position: absolute;
          right: -42px;
          top: -36px;
          font-size: 34px;
          color: #909399;
          cursor: pointer;
        }
      }
      .default {
        display: flex;
        justify-content: start;
      }
      .example-block {
        display: flex;
        justify-content: start;
        /deep/ .el-cascader {
          width: 100%;
          /deep/ input {
            height: 50px;
          }
        }
      }
    }
  }
}
</style>